<%--
  Created by IntelliJ IDEA.
  User: user
  Date: 2022/4/29
  Time: 16:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <!-- 使用bootstrap的js文件前要先引入jquery -->
    <script src="../../js/jquery.slim.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心js文件 -->
    <script src="../../js/bootstrap.bundle.min.js"></script>
</head>
<body>
<%--在表格上面加上搜索框，以及新增/清空按钮--%>
<%--准备一个按钮进行绑定事件，发送请求--%>
<button type="button" id="bt1" class="btn btn-primary">搜索</button>
<%--准备一个div用来接收回显数据--%>
<div id="dv1">

</div>

</body>
<script>
    var bt1=document.getElementById("bt1");
    bt1.onclick=function () {
        // 1、JavaScript内置工具类 XMLHttpRequest
        // 作用：实现基于浏览js环境的异步请求并接受相应的工具。
        // 创建ajax对象。
        var ajaxRequest=new XMLHttpRequest;
        // 2、常规方法：open、send
        ajaxRequest.open("GET","getUserInfoAjaxServlet",true);
        ajaxRequest.send();
        // 3、常规属性：responseText，readyState，status
        // 4、常规事件：onreadystatechange
        ajaxRequest.onreadystatechange=function(reponse){

            if(ajaxRequest.readyState==4){
            document.getElementById("dv1").innerHTML=ajaxRequest.responseText


            }

        }
    }
</script>
</html>
